<template>
  <div style="width:100%;overflow-x:hidden;overflow-y:auto">
    <div class="markdown-body" v-html="html" v-if="input_list[2].value"></div>
    <weui-input :list="input_list" title="" more_label="" :tips="null" agreement_name="" @on-change="on_input_change">
      <weui-button slot="button" type="primary" @on-click="onSubmitClick">
        提交
      </weui-button>
    </weui-input>
  </div>
</template>

<script>
  import WeuiInput from '../vue2componentSet/src/components/WeuiInput'
  import WeuiButton from '../vue2componentSet/src/components/WeuiButton'
  import global from '../lib/global'
  import axios from 'axios'
  import {markdown} from 'markdown'

  export default {
    components: {
      WeuiInput,
      WeuiButton
    },
    data() {
      return {
        input_list: [{
          type: 'div',
          value: ''
        }, {
          type: 'switch',
          label: '需要登录',
          value: false
        }, {
          type: 'switch',
          label: 'is markdown',
          value: false
        }],
        html_id: 0,
        html: ''
      }
    },
    methods: {
      onSubmitClick() {
        axios.post(global.server + 'updateHtml.do', {
          html_id: this.html_id,
          html: this.input_list[0].value,
          needLogin: this.input_list[1].value ? '1' : '0',
          isMarkdown: this.input_list[2].value ? '1' : '0',
        }).then(result => {
          const obj = result.data
          if (obj.result == 1) {
            this.$store.commit('toast', {
              type: 'success',
              content: '成功'
            })
          } else if (obj.result == 0) {
            this.$store.commit('toast', {
              type: 'warn',
              content: '请先登录'
            })
            this.$store.commit('login', '')
            this.$router.push('/login?redirectTo=' + encodeURIComponent(location.href))
          } else {
            this.$store.commit('toast', {
              type: 'warn',
              content: obj.msg
            })
          }
        }, (response) => {
          console.log(response)
        })
      },
      on_input_change(index) {
        if (index == 0) {
          if(this.input_list[2].value) {
            this.html = markdown.toHTML(this.input_list[0].value)
          }
        } else if (index == 2) {
          if(this.input_list[2].value) {
            this.$set(this.input_list[0], 'type', 'textarea')
            this.html = markdown.toHTML(this.input_list[0].value)
          } else {
            this.$set(this.input_list[0], 'type', 'div')
          }
        }
      }
    },
    mounted() {
      this.$store.commit('set_title', 'page')
      location.hash.split('?')[1] && location.hash.split('?')[1].split('&').forEach(kv => {
        kv.split('=')[1] && (this[kv.split('=')[0]] = decodeURIComponent(kv.split('=')[1]))
      })
      if (!this.html_id) {
        this.html_id = location.pathname.substring(1, location.pathname.indexOf('.'))
      }

      if (global.is_debug) {
        this.$set(this.input_list[0], 'value', 'aa')
        return
      }
      axios.post(global.server + 'getHtml.do', {
        html_id: this.html_id
      }).then(result => {
        const obj = result.data
        if (obj.result == 1) {
          this.$set(this.input_list[0], 'value', obj.html.html)
          this.$set(this.input_list[1], 'value', obj.html.needLogin == '1')
          this.$set(this.input_list[2], 'value', obj.html.isMarkdown == '1')
          if (obj.html.isMarkdown == '1') {
            this.$set(this.input_list[0], 'type', 'textarea')
            this.html = markdown.toHTML(this.input_list[0].value)
          }
        } else if (obj.result == 0) {
          this.$store.commit('toast', {
            type: 'warn',
            content: obj.msg
          })
          this.$router.redirect('/login?redirectTo=' + encodeURIComponent(location.hash.substring(1)))
        } else {
          this.$store.commit('toast', {
            type: 'warn',
            content: obj.msg
          })
          this.$router.goback()
        }
      })
    }
  }
</script>

<style>
  @import '~github-markdown-css/github-markdown.css';

  body {
    background-color: #fff;
  }
</style>
